﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="EnjoyVideo.aspx.cs" Inherits="MiaoWeiProject.liuyong.EnjoyVideo" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>尊享视频</title>
    <style type="text/css">
        * {
            padding: 0px;
            margin: 0px;
            font-size: 14px;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        /*头部样式*/
        #heard {
            width: 100%;
            height: 70px;
            background: url('/images/nav-bg.png') repeat-x left top;
            display: flex;
        }

        #heard_conet {
            height: 50px;
            margin: 10px auto;
            width: 75%;
            display: flex;
            justify-content: space-between;
        }

        #conter_left {
            width: 275px;
            height: 50px;
            background: url('/images/nav-logo-2019-0826.png') no-repeat left center;
        }

        #conter_zhong {
            width: 60%;
            height: 50px;
        }

            #conter_zhong ul {
                display: flex;
                justify-content: space-between;
                overflow: hidden;
            }

                #conter_zhong ul li {
                    text-align: center;
                    height: 50px;
                    line-height: 50px;
                }

                    #conter_zhong ul li a {
                        padding: 7px 27px;
                        /*border:1px solid pink;*/
                        color: #666;
                        font-size: 1.2em;
                        border-radius: 18px;
                    }

                    #conter_zhong ul li i.nav-new {
                        display: inline-block;
                        width: 39px;
                        height: 20px;
                        background: url('/images/nav-new.png') no-repeat left top;
                        vertical-align: middle;
                        margin-left: 4px;
                    }
        /*悬浮导航样式*/
        /*#conter_zhong ul li a:*/ .hover {
            color: #f70;
            background-color: #e0dce4;
            box-shadow: 2px 2px 1px #c5c0cc inset;
        }

        #conter_right {
            width: 8%;
            height: 50px;
            /*border:1px solid red;*/
        }

            #conter_right ul {
                height: 50px;
                line-height: 50px;
                display: flex;
                justify-content: space-between;
                overflow: hidden;
            }

                #conter_right ul li {
                    text-align: center;
                }

                    #conter_right ul li a {
                        font-size: 1.1em;
                        color: #666;
                    }

                        #conter_right ul li a:hover {
                            color: #f70;
                        }
        /*点击导航样式*/
        .yangshi {
            color: #fff;
            background-color: #e75c77;
            box-shadow: 2px 2px 1px #c42f4c inset;
        }

        /*中间样式*/
        #zhongjian {
            height: 290px;
            min-width: 1200px;
            background: #000 url("lyimages/bannerBgGold.jpg") no-repeat center center;
        }

        .main {
            height: 100%;
            position: relative;
            margin: 0 auto;
        }

            .main a {
                position: absolute;
                width: 193px;
                height: 33px;
                bottom: 40px;
                left: 50%;
                margin-left: -41px;
            }

        /*视频*/
        #tupian {
            padding-top: 23px;
            padding-bottom: 30px;
            /*min-height: 400px;*/
            /*background-color: #f3f5f7;*/
        }

        .vipbox {
            width: 1200px;
            margin: 0 auto;
        }

        .clear {
            width: 1234px;
            margin: 0 -14px;
        }

        .vipbox li {
            float: left;
            width: 240px;
            height: 299px;
            padding: 0 19px;
            border: 1px solid #eaeeee;
            background-color: #fff;
            margin: 10px 14px;
            box-shadow: 0 0 15px 2px #eaeeee;
            /*cursor: pointer;*/
            position: relative;
        }

            .vipbox li:hover {
                background-color: #f3f5f7;
                border: 1px solid red;
            }

            .vipbox li a {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }

        .vipbox h3 {
            margin-top: 19px;
            font-size: 14px;
            color: #949fab;
            text-align: center;
            font-weight: normal;
            border-top: 1px solid #eaeeee;
            height: 17px;
        }

            .vipbox h3 span {
                display: inline-block;
                padding: 0 7px;
                /*background: #fff;*/
                position: relative;
                top: -9px;
            }

        .vipbox img {
            width: 278px;
            height: 140px;
            margin: 0 -19px 12px;
        }

        .vipbox p {
            height: 56px;
            line-height: 28px;
            font-size: 16px;
            color: #444d59;
            margin-bottom: 8px;
        }

        .vipbox .bottom-box {
            width: 100%;
            height: 24px;
        }

        .vipbox .money {
            float: left;
            height: 100%;
            line-height: 24px;
            color: #e15671;
            font-size: 16px;
        }

        .vipbox .delete {
            float: left;
            height: 12px;
            font-size: 12px;
            padding-top: 7px;
            line-height: 12px;
            color: #949fab;
            text-decoration: line-through;
            margin-left: 4px;
        }

        .vipbox .study {
            float: right;
            height: 22px;
            line-height: 22px;
            padding: 0 16px 0 24px;
            border: 1px solid #eaeeee;
            color: #949fab;
            border-radius: 12px;
            font-size: 12px;
            background: url("lyimages/fire.png") no-repeat 10px center;
        }


        /*尾部样式*/
        #weibu {
            height: 144px;
            width: 100%;
            display: flex;
            background: url('/images/footer-bg.jpg') repeat-x left top;
        }

        #weibu_zhong {
            width: 75%;
            height: 80px;
            margin: 30px auto;
            justify-content: space-between;
            /*border:1px solid pink;*/
            display: flex;
        }

        #weibu_left {
            height: 100%;
            width: 25%;
            /*border:1px solid black;*/
            border-right: 2px solid #b7b3c1;
        }

        #weibu_right {
            height: 100%;
            width: 65%;
            /*border:1px solid blue;*/
        }

        #weibu_right_top {
            height: 50%;
            width: 100%;
            /*border:1px solid red;*/
        }

        #weibu_right_down {
            height: 50%;
            width: 100%;
            /*border:1px solid black;*/
        }

        #weibu_right_top ul {
            display: flex;
            justify-content: space-between;
            overflow: hidden;
        }

            #weibu_right_top ul li {
                height: 35px;
                line-height: 35px;
            }

                #weibu_right_top ul li a {
                    color: #666;
                    font-size: 1.1em;
                }

                    #weibu_right_top ul li a:hover {
                        color: #f70;
                    }

                #weibu_right_top ul li.link-line {
                    color: #666;
                    padding: 0 16px;
                }

        #weibu_right_down p {
            font-size: 1.2em;
            color: #6f7b91;
            height: 35px;
            line-height: 35px;
        }
    </style>
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        //页面加载事件
        function Chaxun() {
            $.ajax({
                type: "post",
                url: "VIPjiazai.ashx",
                dataType: "json",
                success: function (result) {
                    //返回成功
                    //遍历JSON数组
                    $.each(result, function (i, item) {
                        var KeChengName = item.KeChengName;
                        var KeChengID = item.KeChengID;
                        var KeChengPrice =Number(item.KeChengPrice).toFixed(2);
                        var KeChengTuanjia =Number(item.KeChengTuanjia).toFixed(2);
                        var KeChengImages = item.KeChengImages;
                        $(".vipbox").children("ul").append(" <li><a target='_blank' href='Chapter.aspx?id=" + KeChengID + "&name=" + KeChengName + "'></a><h3><span></span></h3><img src='lyimages/" + KeChengImages + "' /><p>" + KeChengName + "</p><div class='bottom-box'> <span class='money'>￥" + KeChengTuanjia + "</span><span class='delete'>￥" + KeChengPrice + "</span></div></li>");
                    });
                }
            });
        }
        //头部的
        function Heard() {
            $(".li").hover(function () {
                $(this).addClass("hover");
                $(this).css({ "color": " #f70" });
                //$(this).parent().siblings().children().removeClass("hover");
            }, function () {
                $(this).removeClass("hover");
                $(this).css({ "color": "#666" });
                //$(this).parent().siblings().children().removeClass("hover");
            }
            );
            $(".li").click(function () {
                $(this).addClass("yangshi");
                $(this).css({ "color": "white" });
                $(this).parent().siblings().children().removeClass("yangshi");
            });
        }
        $(function () {
            //头部
            Heard();
            Chaxun();
            //进入页面时尊享视频选中
            $(".li").eq(3).addClass("yangshi");
            $(".li").eq(3).css({ "color": "white" });
            $(".li").eq(3).parent().siblings().children().removeClass("yangshi");
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <%--  头部--%>
        <div id="heard">
            <div id="heard_conet">
                <div id="conter_left"></div>
                <div id="conter_zhong">
                    <ul>
                        <li><a href="#" class="li">首页</a></li>
                        <li><a href="#" class="li">课程</a></li>
                        <li><a href="#" class="li">视频学习</a></li>
                        <li><a href="#" class="li">尊享视频<i class="nav-new"></i></a></li>
                        <li><a href="#" class="li">社区</a></li>
                    </ul>
                </div>
                <div id="conter_right">
                    <ul>
                        <li><a href="#">登录</a></li>
                        <li>|</li>
                        <li><a href="#">注册</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <%--中间内容--%>
        <div id="zhongjian">
            <div class="main">
                <a href="#"></a>
            </div>
        </div>

        <div id="tupian">
            <%--视频--%>
            <div class="vipbox">
                <ul class="clear">
                    <%--<li>
                        <a href="#"></a>
                        <h3>
                            <span>SEC</span>
                        </h3>
                        <img src="lyimages/86835654383665_240x120crop.png" />
                        <p>Vue.js精英训练营</p>
                        <div class="bottom-box">
                            <span class="money">￥89.00</span>
                            <span class="delete">￥99.00</span>
                            <span class='study'>3109</span>
                        </div>
                    </li>--%>
                </ul>
            </div>
        </div>
        <%--  尾部内容--%>
        <div id="weibu">
            <div id="weibu_zhong">
                <div id="weibu_left">
                    <img src="../images/weibumiaowei.jpg" />
                </div>
                <div id="weibu_right">
                    <div id="weibu_right_top">
                        <ul>
                            <li><a href="#">首页</a></li>
                            <li class="link-line">|</li>
                            <li><a href="#">课程</a></li>
                            <li class="link-line">|</li>
                            <li><a href="#">视频学习</a></li>
                            <li class="link-line">|</li>
                            <li><a href="#">尊享视频</a></li>
                            <li class="link-line">|</li>
                            <li><a href="#">社区</a></li>
                            <li class="link-line">|</li>
                            <li><a href="#">关于我们</a></li>
                            <li class="link-line">|</li>
                            <li><a href="#">常见问题</a></li>

                        </ul>
                    </div>
                    <div id="weibu_right_down">
                        <p>京ICP备08102442号-1 2007-2019 MIAOV.COM 版权所有</p>
                    </div>
                </div>
            </div>
        </div>
    </form>
</body>
</html>
